@function pr($size) {
    @return ($size/32)*1rem;
}

body {
    width: pr(50)
}

@mixin bgc($url, $size) {
    background: url($url) no-repeat center /100% 100%;
    position: absolute;
    left: 50%;
    margin-left: (-$size/32)*1rem
}

@mixin bg($url) {
    background: url($url) no-repeat center /100% 100%;
    position: absolute;
}

@mixin wh($width, $height) {
    width: ($width/32)*1rem;
    height: ($height/32)*1rem
}

div {
    @include wh(200, 400)
}

p {
    @include bgc('../image/loading/loading-txt.png', 200)
}

h1 {
    @include bg('../image/loading/loading-txt.png')
}

@for $i from 1 through 12 {
    .gift-box>div {
        animation: giftbox 2s infinite
    }
    .gift-box>div:nth-child(#{$i})>div {
        animation: giftboxmove 1s infinite
    } // .item-#{$i} {
    //     width: 2em * $i;
    // }
}